<template>
	<div>
		<Card>
			<!-- 删除面板 -->
			<Modal v-model="deleteNsall" title="删除分组" @on-ok="remove" @on-cancel="cancel">
				是否删除该分组
			</Modal>
			<!-- 详情面板 -->
			<Modal v-model="details" title="删除分组" @on-cancel="cancel" width="1200" class="details">
				<Card class="myCard">
					<div class="title">
						详情
					</div>
					<div class="form">
						<label>名称：</label>
						<span>{{name}}</span>
					</div>
					<div class="form">
						<label>标签</label>
						<span>
							{{labels}}
						</span>
					</div>
					<div class="form">
						<label>供应者：</label>
						<span>{{provisioner}}</span>
					</div>
					<div class="form">
						<label>参数：</label>
						<span>{{parameter}}</span>
					</div>
					<div class="form">
						<label>创建时间：</label>
						<span>{{date}}</span>
					</div>
				</Card>
			</Modal>
			<Table :columns="columns" :data="tableData"></Table>
		</Card>
	</div>
</template>

<script>
	import Util from '@/utils/index'
	export default {
		data () {
			return {
				columns: [
					{
						title: '名称',
						key: 'metadata',
						render: (h, params) => {
							return h('span', params.row.metadata.name)
						}
					},
					{
						title: '标签',
						key: 'metadata',
						render: (h, params) => {
							if (params.row.metadata.labels !== undefined) {
								let str = ''
								for (let key in params.row.metadata.labels) {
									str += '{' + key + ':' + params.row.metadata.labels[key] + '}'
								}
								return h('span', str)
							} else {
								return h('span', '-')
							}
						}
					},
					{
						title: '供应者',
						key: 'provisioner'
					},
					{
						title: '参数',
						key: 'spec',
						render: (h, params) => {
							return h('span', '-')
						}
					},
					{
						title: '运行时间',
						key: 'metadata',
						render: (h, params) => {
							return h('span', Util.fommotDate(params.row.metadata.creationTimestamp))
						}
					},
					{
						title: '操作',
						key: 'handle',
						render: (h, params) => {
							return h('div', [
								h('Button', {
									props: {
										type: 'primary',
										size: 'small'
									},
									style: {
										marginRight: '5px'
									},
									on: {
										click: () => {
											this.details = true
											let detailsData = this.tableData[params.index]
											// 名称
											this.name = detailsData.metadata.name
											// 创建时间
											this.date = Util.fommotDate(detailsData.metadata.creationTimestamp)
											// 标签
											this.labels = '-'
											// 供应者
											this.provisioner = detailsData.provisioner
											// 参数
											this.parameter = '-'
											this.$api.get(0, '/kuber/v2/k8s/stoarge?type=PersistentVolume&owner=&className=' + params.row.metadata.name, {}, r => {
												this.tableData1 = r.data.data.items
											})
										}
									}
								}, '详情'),
								h('Button', {
									props: {
										type: 'error',
										size: 'small'
									},
									on: {
										click: () => {
											this.deleteNsall = true
											this.deleteName = params.row.metadata.name
											this.deleteIndex = params.index
										}
									}
								}, '删除')
							])
						}
					}
				],
				tableData: [],
				columns1: [
					{
						title: '名称',
						key: 'metadata',
						width: '350',
						render: (h, params) => {
							return h('span', params.row.metadata.name)
						},
						fixed: 'left'
					},
					{
						title: '标签',
						key: 'metadata',
						width: '70',
						render: (h, params) => {
							if (params.row.metadata.labels !== undefined) {
								let str = ''
								for (let key in params.row.metadata.labels) {
									str += '{' + key + ':' + params.row.metadata.labels[key] + '}'
								}
								return h('span', str)
							} else {
								return h('span', '-')
							}
						}
					},
					{
						title: '总量',
						key: 'spec',
						width: '70',
						render: (h, params) => {
							return h('span', params.row.spec.capacity.storage)
						}
					},
					{
						title: '访问模式',
						key: 'spec',
						width: '150',
						render: (h, params) => {
							return h('span', params.row.spec.accessModes[0])
						}
					},
					{
						title: '回收策略',
						key: 'spec',
						width: '100',
						render: (h, params) => {
							return h('span', params.row.spec.persistentVolumeReclaimPolicy)
						}
					},
					{
						title: '声明',
						key: 'spec',
						width: '150',
						render: (h, params) => {
							return h('span', params.row.spec.claimRef.namespace + '/' + params.row.spec.claimRef.name)
						}
					},
					{
						title: '存储类',
						width: '80',
						key: 'spec',
						render: (h, params) => {
							return h('span', params.row.spec.storageClassName)
						}
					},
					{
						title: '状态',
						key: 'status',
						width: '100',
						render: (h, params) => {
							return h('span', params.row.status.phase)
						}
					},
					{
						title: '运行时间',
						key: 'metadata',
						width: '200',
						render: (h, params) => {
							return h('span', Util.fommotDate(params.row.metadata.creationTimestamp))
						},
						fixed: 'right'
					}
				],
				tableData1: [],
				// 删除面板
				deleteNsall: false,
				// 删除组名
				deleteName: '',
				// 删除下标
				deleteIndex: '',
				// 应用类型列表
				typeList: [
					{
						name: 'stoarge',
						text: '存储类'
					},
					{
						name: 'PersistentVolumeClaim',
						text: '持久化存储卷声明'
					},
					{
						name: 'PersistentVolume',
						text: '持久化存储卷'
					}
				],
				// 详情面板
				details: false,
				// 名称
				name: '',
				// 标签
				labels: '',
				// 创建时间
				date: '',
				// 供应者
				provisioner: '',
				// 参数
				parameter: '',
				// 服务器
				server: '',
				// 路径
				path: '',
				// 只读
				readonly: ''
			}
		},
		methods: {
			// 展示面板数据回调
			show (index) {
				var date1 = new Date(this.tableData[index].metadata.creationTimestamp).toString().replace(/-/g, '/')
				var date2 = new Date(+new Date(date1) + 8 * 3600 * 1000).toISOString().replace(/T/g, ' ').replace(/\.[\d]{3}Z/, '')
				this.$Modal.info({
					title: '信息',
					content: `分组：${this.tableData[index].metadata.name}<br>状态：${this.tableData[index].status.phase}<br>运行时间：${date2}`
				})
			},
			// 删除
			remove () {
				this.$api.delete(0, '/kuber/v2/k8s/nameSpace?name=' + this.deleteName, {}, r => {
					if (r.data.code === 0) {
						this.tableData.splice(this.deleteIndex, 1)
						this.$Message.success('删除成功')
					} else {
						this.$Message.error('删除失败')
					}
					this.cancel()
				})
			},
			cancel () {
				this.deleteName = ''
				this.deleteIndex = ''
			},
			// 获取表格数据
			getList () {
				this.$api.get(0, '/kuber/v2/k8s/stoarge?type=StorageClass&owner=', {}, r => {
					this.tableData = r.data.data.items
				})
			}
		},
		mounted () {
			this.getList()
		}
	}
</script>

<style>
	label.myLabel {
		width: 100px;
		display: inline-block;
		margin-right: 15px;
		text-align: right;
	}

	div.form-div {
		margin-bottom: 15px;
	}

	.resources .ivu-modal {
		width: 500px !important
	}

	.resources label.myLabel {
		width: 200px
	}

	.resources .ivu-input-wrapper {
		width: 200px
	}
</style>
